<template>
  <div class="case">
    <div class="index-title">
      <h2>案例灵感</h2>
      <p>Inspiration Gallery</p>
    </div>
    <div class="case-box">
      <div class="case-li" v-for="(item, index) in caseArr" :key="index">
        <router-link :to="{path:'/case-details', query:{id: item.id, type: type}}">
          <img :src="item.img_url" :alt="item.title">
          <p class="case-li-title">{{item.title}}</p>
        </router-link>
      </div>
    </div>
    <div class="more">
      <router-link :to="{path:'/case', query:{type: type}}">查看更多</router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'case',
    props: {
      caseArr: {
        type: Array,
        required: true,
        default: function() {
          return []
        }
      },
      type: {
        required: true,
        default: 0
      }
    },
  }
</script>

<style lang="less" scoped>
  .case {
    padding: 0.18rem 0.25rem 0.54rem;

    .index-title {
      text-align: center;
      margin-bottom: 0.3rem;

      h2 {
        line-height: 1.2;
      }

      p {
        font-size: 0.25rem;
        color: #616161;
      }
    }

    .case-li {
      margin-bottom: 0.2rem;
      img {
        display: block;
        width: 100%;
        height: 4.72rem;
      }

      p {
        font-size: 0.25rem;
        line-height: 0.43rem;
        margin-top: 0.09rem;
        color: #2d2d2d;
      }
    }

    .more a {
      display: block;
      width: 1.63rem;
      height: 0.48rem;
      line-height: 0.48rem;
      text-align: center;
      margin: 0.36rem auto 0 auto;
      border: 1px solid #3f3f3f;
      color: #3f3f3f;
      font-size: 0.25rem;
    }
  }
</style>
